<template>
	<div id="detail">
		<div class="showDetail">
      <div class="goBack">
        <h2>用户详情</h2>
        <el-button icon="el-icon-arrow-left" @click="goBack">上一页</el-button>
      </div>
			<el-card class="box-card">
        <el-row :gutter="10" span="24"  class="flex">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="publicStyle">
            <div>
              <span class="title">id：</span>
              <span>{{detailData.id}}</span>
            </div>
            <div>
              <span class="title">头像：</span>
              <img :src='detailData.httpAvatar' width="60" height='60' alt='头像有误' />
            </div>
            <div>
              <span class="title">昵称：</span>
              <span>{{detailData.name}}</span>
            </div>
            <div>
              <span class="title">用户名：</span>
              <span>{{detailData.userName}}</span>
            </div>
            <div>
              <span class="title">出生年月：</span>
              <span>{{detailData.birthDate}}</span>
            </div>
            <div>
              <span class="title">年收入(美元)：</span>
              <span>{{detailData.income}}</span>
            </div>
            <div>
              <span class="title">性别：</span>
              <span>{{detailData.sex=='woman'?'女':'男'}}</span>
            </div>
            <div>
              <span class="title">性取向：</span>
              <span v-if="detailData.like==='secrecy'">保密</span>
              <span v-if="detailData.like==='homosexual'">同性恋</span>
              <span v-if="detailData.like==='oppositeSex'">异性恋</span>
              <span v-if="detailData.like==='bisexual'">双性恋</span>
            </div>
            <div>
              <span class="title">情感状态：</span>
              <span v-if="detailData.emotionalState==='secrecy'">保密</span>
              <span v-if="detailData.emotionalState==='single'">单身</span>
              <span v-if="detailData.emotionalState==='bePassionatelyInLove'">热恋</span>
              <span v-if="detailData.emotionalState==='married'">已婚</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="publicStyle">
            <div>
              <span class="title">国家：</span>
              <span>{{detailData.country}}</span>
            </div>
            <div>
              <span class="title">年龄：</span>
              <span>{{detailData.age}}</span>
            </div>
            <div>
              <span class="title">体重(kg)：</span>
              <span>{{detailData.weight}}</span>
            </div>
            <div>
              <span class="title">身高(M)：</span>
              <span>{{detailData.height}}</span>
            </div>
            <div>
              <span class="title">邮箱：</span>
              <span>{{detailData.mail}}</span>
            </div>
            <div>
              <span class="title">内部用户：</span>
              <span>{{detailData.internal?'是':'否'}}</span>
            </div>
            <div>
              <span class="title">金币数量：</span>
              <span>{{detailData.gold}}</span>
            </div>
            <div>
              <span class="title">会员等级：</span>
              <span>{{detailData.grade==='ordinary'?'普通用户':detailData.grade==='blueDiamond'?'蓝钻':'皇冠'}}</span>
            </div>
            <div>
              <span class="title">会员截止时间：</span>
              <span>{{detailData.vipDate}}</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="publicStyle">
            <div>
              <span class="title">登录ip：</span>
              <span>{{detailData.ip}}</span>
            </div>
            <div>
              <span class="title">用户签名：</span>
              <span>{{detailData.autograph}}</span>
            </div>
            <div>
              <span class="title">代理名称：</span>
              <span>{{agentName}}</span>
            </div>
            <div>
              <span class="title">是否审核：</span>
              <span>{{detailData.examine?'是':'否'}}</span>
            </div>
            <div>
              <span class="title">是否永久在线：</span>
              <span>{{detailData.permanentOnline?'是':'否'}}</span>
            </div>
            <div>
              <span class="title">发言状态：</span>
              <span>{{detailData.speak?'正常':'禁言中'}}</span>
            </div>
            <div>
              <span class="title">创建时间：</span>
              <span>{{detailData.createDate}}</span>
            </div>
            <div>
              <span class="title">修改时间：</span>
              <span>{{detailData.modifyDate}}</span>
            </div>
            <div>
              <span class="title">最后登录时间：</span>
              <span>{{detailData.loginDate}}</span>
            </div>
          </el-col>
        </el-row>
        <div class='btnSelect'>
          <el-button type="info" @click="recharge">金币修改</el-button>
          <el-button type="warning" @click="memberVipRecor">开通会员</el-button>
          <el-button type="primary" :disabled="detailData.examine" @click="userAudit">用户审核</el-button>
          <el-button type="success" v-if="!detailData.internal" @click="changeUserType(true)">设为内部用户</el-button>
          <el-button type="warning" v-else @click="changeUserType(false)">取消内部用户</el-button>
          <el-button type="danger"  @click="resetPassTips">重置密码</el-button>
          <el-button type="warning" @click="agentEdit">修改代理</el-button>
          <el-button type="success" v-if="detailData.speak" @click="changeSpeakType()">禁言</el-button>
          <el-button type="info" v-else @click="changeSpeakType()">解除禁言</el-button>
          <el-button type="danger" @click="deleteUser">删除用户</el-button>
          <el-button type="success" v-if="detailData.permanentOnline" @click="changeOnlineType()">解除永久在线</el-button>
          <el-button type="primary" v-else @click="changeOnlineType()">设为永久在线</el-button>
        </div>
			</el-card>
		</div>
    <!--金币修改-->
    <el-dialog id="add-dialog" title="金币修改" :visible.sync="rechargeDialogVisible">
      <el-form label-position="right" label-width="34%"  :model="add"  :rules="addRules" ref="addRuleForm">
        <el-form-item label="用户名称：">
          <div>{{detailData.userName}}</div>
        </el-form-item>
        <el-form-item label="原本金币：">
          <div>{{detailData.gold}}</div>
        </el-form-item>
        <el-form-item label="变更类型：">
          <el-switch v-model="add.isRecharge" inactive-text="减少" active-text="增加"/>
        </el-form-item>
        <el-form-item label="修改金币：" prop="num">
          <el-input v-model="add.num" placeholder="请输入变更的金额" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="add-btn" type="primary" @click="addSubmit('addRuleForm')">提 交</el-button>
      </span>
    </el-dialog>
    <!--开通会员-->
    <el-dialog id="member-dialog" title="开通会员" :visible.sync="memberVipRecordDialogVisible">
      <el-form label-position="right" label-width="40%"  :model="member"  :rules="memberRules" ref="memberRuleForm">
        <el-form-item label="开通会员类型：">
          <el-select v-model="member.grade" placeholder="请选择开通会员类型">
            <el-option
              v-for="item in memberList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开通会员月数：" prop="month">
          <el-input v-model="member.monthNum" placeholder="请输入开通的月数" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="add-btn" type="primary" @click="memberSubmit('memberRuleForm')">开 通</el-button>
      </span>
    </el-dialog>
    <!--用户审核-->
    <el-dialog :visible.sync="auditDialogVisible" width="300px" center class="del-dialog" top="20%">
      <span class="tips">您确定要通过审核吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="auditSubmit">确 定</el-button>
        </span>
    </el-dialog>
    <!--内部用户状态更改-->
    <el-dialog :visible.sync="changeDialogVisible" width="300px" center class="del-dialog" top="20%">
      <span class="tips">您确定要更改用户状态吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="changeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="userTypeSubmit">确 定</el-button>
        </span>
    </el-dialog>
    <!--重置密码-->
    <el-dialog :visible.sync="delDialogVisible" width="300px" center class="del-dialog" top="20%">
      <span class="tips">您确定要重置密码吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="resetPass">确 定</el-button>
        </span>
    </el-dialog>
    <!--修改代理-->
    <el-dialog id="agent-dialog" title="修改代理" :visible.sync="agentDialogVisible">
      <el-form label-position="right" label-width="34%"  ref="agentRuleForm">
        <el-form-item label="代理名称：">
          <el-select v-model="agentId" filterable placeholder="请选择代理名称">
            <el-option
              v-for="item in agentList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="add-btn" type="primary" @click="agentSubmit">修 改</el-button>
      </span>
    </el-dialog>
    <!--更改用户发言状态-->
    <el-dialog :visible.sync="speakDialogVisible" width="300px" center class="del-dialog" top="20%">
      <span class="tips">您确定要更改用户发言状态吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="speakDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="speakTypeSubmit">确 定</el-button>
        </span>
    </el-dialog>
    <!--删除用户-->
    <el-dialog :visible.sync="userDialogVisible" width="300px" center class="del-dialog" top="20%">
      <span class="tips">删除用户可能导致未知错误,请确认</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="userDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="userSubmit">确 定</el-button>
        </span>
    </el-dialog>
    <!--设置用户永久在线状态-->
    <el-dialog :visible.sync="onlineDialogVisible" width="300px" center class="del-dialog" top="20%">
      <span class="tips">您确定要切换用户永久在线状态吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="onlineDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onlineSubmit">确 定</el-button>
        </span>
    </el-dialog>
	</div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
  export default {
    name: "userDetail",
    data(){
      var checkNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('充值金额不能为空'));
        }else if(!/^[1-9]+[0-9]*$/.test(value)){
          return callback(new Error('充值金额必须是正整数'));
        }else {
          callback();
        }
      };
      var checkMonth = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('开通会员月数不能为空'));
        }else if(!/^[1-9]+[0-9]*$/.test(value)){
          return callback(new Error('开通会员月数必须是正整数'));
        }else {
          callback();
        }
      };
      return{
        // 查询
        detailId:null,
		    detailData:{},
        agentName:null,
        agentId:null,
        agentList:[],
        auditDialogVisible:false,
        rechargeDialogVisible:false,
        add:{
          num:null,
          isRecharge:true
        },
        addRules:{
          num:[{validator: checkNum, trigger: 'blur' }]
        },
        memberVipRecordDialogVisible:false,
        memberList:[
          {
            label:'普通用户',
            value:'ordinary'
          },
          {
            label:'蓝钻',
            value:'blueDiamond'
          },
          {
            label:'皇冠',
            value:'anCrown'
          }
        ],
        member:{
          grade:'blueDiamond',
          monthNum:''
        },
        memberRules:{
          monthNum:[{validator: checkMonth, trigger: 'blur' }]
        },
        changeDialogVisible:false,
        status:null,
        delDialogVisible:false,
        agentDialogVisible:false,
        speakDialogVisible:false,
        userDialogVisible:false,
        onlineDialogVisible:false,
      }
    },
    mounted() {
	    this.getId();
      this.inquiryAgentList();
    },
    methods:{
      getId() {
        this.detailId=this.$route.query.id;
        this.inquiryList();
      },
      inquiryAgent(id){
        let that=this;
        request({
          method: 'get',
          url: 'admin/agent/get/'+id
        }).then(function (res) {
          if(res.code===200){
            that.agentName=res.data.name;
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //查询列表
      inquiryList(){
        let that=this;
        if(!that.detailId){
          return false;
        }
        request({
          method: 'get',
          url: 'admin/member/get/'+that.detailId
        }).then(function (res) {
          if(res.code===200){
           that.detailData=res.data;
           if(res.data.agentId !== null){ //代理id存在
              that.inquiryAgent(res.data.agentId);
             that.agentId=res.data.agentId;
           }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //用户审核
      userAudit(){
        this.auditDialogVisible=true;
      },
      auditSubmit(){
        let that=this;
        request({
          method: 'post',
          url: 'admin/member/toExamine/'+that.detailData.id
        }).then(function (res) {
          if(res.code===200){
            Message.success("审核成功");
            that.auditDialogVisible=false;
            that.inquiryList();
          }
        }).catch(function (error) {
          console.log(error);
        })
      },
      //充值
      recharge(){
        this.rechargeDialogVisible=true;
      },
      addSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that=this;
            request({
              method: 'post',
              url: 'admin/member/recharge/'+that.detailData.id,
              headers:{
                'content-type':'application/x-www-form-urlencoded'
              },
              params:that.add
            }).then(function (res) {
              if(res.code===200){
                that.rechargeDialogVisible = false;
                Message.success("修改成功");
                that.add={
                  num:null,
                  isRecharge:true
                };
                that.inquiryList();
              }
            }).catch(function (error) {
              console.log(error);
            });
          } else {
            return false;
          }
        });
      },
      //开通会员
      memberVipRecor(){
        this.memberVipRecordDialogVisible=true;
      },
      memberSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that=this;
            that.member.memberId=that.detailData.id;
            request({
              method: 'post',
              url: 'admin/memberVipRecord/add',
              headers:{
                'content-type':'application/x-www-form-urlencoded'
              },
              params:that.member
            }).then(function (res) {
              if(res.code===200){
                that.memberVipRecordDialogVisible = false;
                Message.success("开通成功");
                that.member.monthNum="";
                that.inquiryList();
              }
            }).catch(function (error) {
              console.log(error);
            });
          } else {
            return false;
          }
        });
      },
      //设为内部用户或取消
      userTypeSubmit(){
        let that=this;
        request({
          method: 'post',
          url: 'admin/member/inside/'+that.detailData.id+"/"+that.status
        }).then(function (res) {
          if(res.code===200){
            Message.success("更改用户状态成功");
            that.inquiryList();
            that.changeDialogVisible=false;
          }
        }).catch(function (error) {
          console.log(error);
        })
      },
      changeUserType(status){
        this.changeDialogVisible=true;
        this.status=status;
      },
      //重置密码提示
      resetPassTips(){
        this.delDialogVisible=true;
      },
      //重置密码
      resetPass(){
        let that=this;
        request({
          method: 'post',
          url: 'admin/member/reset/password/'+that.detailData.id
        }).then(function (res) {
          if(res.code===200){
            Message.success("重置密码成功");
            that.delDialogVisible=false;
            that.inquiryList();
          }
        }).catch(function (error) {
          console.log(error);
        })
      },
      //查询代理列表
      inquiryAgentList(){
        let that=this;
        request({
          method: 'get',
          url: 'admin/agent/all/select'
        }).then(function (res) {
          if(res.code===200){
            if(res.data.length>0){
              for (let i = 0; i <res.data.length ; i++) {
                that.agentList.push({
                  label:res.data[i].name,
                  value:res.data[i].id
                })
              }
            }
          }
        }).catch(function (error) {
          console.log(error);
      })
      },
      //修改代理弹出层
      agentEdit(){
        this.agentDialogVisible=true;
      },
      //修改代理
      agentSubmit(){
        let that=this;
        request({
          method: 'post',
          url: 'admin/member/update/agent/'+that.detailId+'?'+'agentId='+that.agentId,
          headers:{
            'content-type':'application/x-www-form-urlencoded'
          }
        }).then(function (res) {
          if(res.code===200){
            that.agentDialogVisible = false;
            Message.success("修改关联列表成功");
            that.inquiryList();
          }
        }).catch(function(error){
          console.log(error);
        });
      },
      //修改用户发言状态
      speakTypeSubmit(){
        let that=this;
        request({
          method: 'post',
          url: 'admin/member/update/speak/'+that.detailData.id
        }).then(function (res) {
          if(res.code===200){
            Message.success("用户禁言状态修改成功");
            that.inquiryList();
            that.speakDialogVisible=false;
          }
        }).catch(function (error) {
          console.log(error);
        })
      },
      changeSpeakType(){
        this.speakDialogVisible=true;
      },
      //删除用户
      deleteUser(){
        this.userDialogVisible=true;
      },
      userSubmit(){
        let that=this;
        request({
          method: 'post',
          url: 'admin/member/delete/'+that.detailData.id
        }).then(function (res) {
          if(res.code===200){
            Message.success("删除成功");
            that.userDialogVisible=false;
            window.history.go(-1);
          }
        }).catch(function (error) {
          console.log(error);
        })
      },
      //修改用户永久在线状态
      onlineSubmit(){
        let that=this;
        request({
          method: 'post',
          url: 'admin/member/update/permanentOnline/'+that.detailData.id
        }).then(function (res) {
          if(res.code===200){
            Message.success("更改用户永久在线状态成功");
            that.inquiryList();
            that.onlineDialogVisible=false;
          }
        }).catch(function (error) {
          console.log(error);
        })
      },
      changeOnlineType(){
        this.onlineDialogVisible=true;
      },
      //返回上一页
      goBack(){
        window.history.go(-1);
      }
    }
  }
</script>

<style src="../../assets/css/userManagement/userDetail.css">

</style>
